<script setup lang="ts">
import { computed } from 'vue'

const props = defineProps({
  text: {
    type: String,
    default: '',
  },
  rotate: {
    type: [Boolean, String],
    default: false,
  },
  bgColor: {
    type: String,
    default: 'linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.6))',
  },
  fontColor: {
    type: String,
    default: '#FFFFFF',
  },
})

const emit = defineEmits(['click'])

const _rotate = computed(() => {
  return String(props.rotate) !== 'false'
})
</script>

<template>
  <button
    class="buttonBorder" :class="[!_rotate ? 'dlbutton' : 'dlbutton_loading']"
    :style="{ background: bgColor, color: fontColor }"
    @click="emit('click', $event)"
  >
    <view :class="_rotate ? 'rotate_loop' : ''">
      <text v-if="_rotate" class="cuIcon cuIcon-loading1" />
      <view v-if="!_rotate">
        <slot name="text">
          {{ text }}
        </slot>
      </view>
    </view>
  </button>
</template>

<style scoped>
@import "./css/icon.css";

button {
  outline: none;
}

button:after {
  border: none;
}

button:focus {
  outline: none;
}

.dlbutton {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFFFFF;
  font-size: 30rpx;
  white-space: nowrap;
  overflow: hidden;
  width: 601rpx;
  height: 100rpx;
  background: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.6));
  box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164,217,228,0.4);
  border-radius: 2.5rem;
  margin-top: 0rpx;
}

.dlbutton_loading {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FFFFFF;
  font-size: 30rpx;
  width: 100rpx;
  height: 100rpx;
  background: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.6));
  box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164,217,228,0.4);
  border-radius: 2.5rem;
  margin-top: 0rpx;
}

.buttonBorder {
  border: none;
  border-radius: 2.5rem;
  -webkit-box-shadow: 0 0 60rpx 0 rgba(0,0,0,.2);
  box-shadow: 0 0 60rpx 0 rgba(0,0,0,.2);
  -webkit-transition: all 0.4s cubic-bezier(.57,.19,.51,.95);
  -moz-transition: all 0.4s cubic-bezier(.57,.19,.51,.95);
  -ms-transition: all 0.4s cubic-bezier(.57,.19,.51,.95);
  -o-transition: all 0.4s cubic-bezier(.57,.19,.51,.95);
  transition: all 0.4s cubic-bezier(.57,.19,.51,.95);
}

.rotate_loop {
  -webkit-transition-property: -webkit-transform;
  -webkit-transition-duration: 1s;
  -moz-transition-property: -moz-transform;
  -moz-transition-duration: 1s;
  -webkit-animation: rotate 1s linear infinite;
  -moz-animation: rotate 1s linear infinite;
  -o-animation: rotate 1s linear infinite;
  animation: rotate 1s linear infinite;
}

@-webkit-keyframes rotate {
  from { -webkit-transform: rotate(0deg) }
  to { -webkit-transform: rotate(360deg) }
}

@-moz-keyframes rotate {
  from { -moz-transform: rotate(0deg) }
  to { -moz-transform: rotate(359deg) }
}

@-o-keyframes rotate {
  from { -o-transform: rotate(0deg) }
  to { -o-transform: rotate(359deg) }
}

@keyframes rotate {
  from { transform: rotate(0deg) }
  to { transform: rotate(359deg) }
}
</style>
